<template>
	<view class="home">

		<div class="head">
			<div class="state">
				<div class="sao" @tap="scanCode">
					<img src="~@/static/home/sys.png" alt="">
				</div>
				<div class="search">
					<van-search :value="123" readonly @tap="toSearch" placeholder="请输入商品名称" />
				</div>
				<div class="lingdang"></div>
			</div>

			<div class="recommend">  
				<div>推荐</div>
				<span>百货</span>
				<span>鞋包</span>
				<span>服饰</span>
				<span>食品</span>
				<span>数码</span>
				<span>美妆</span>
				<span>家纺</span>
			</div>

			<div class="add">
				<img src="~@/static/home/banner.png" alt="">
			</div>

			<van-notice-bar
				left-icon="volume-o"
				custom-class='notice'
				mode="link"
				@click="onNotice"
				text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
			/>
		</div>

		<div class="pd">
			<van-row class="radius kuaijie">
				<van-col span="6">
					<navigator url="../search/taobao" hover-class="none">
						<img src="~@/static/home/tb.png" alt="">
						<span>淘宝折扣</span>
					</navigator>
				</van-col>
				<van-col span="6">
					<navigator url="../search/jingdong" hover-class="none">
						<img src="~@/static/home/jd.png" alt="">
						<span>京东折扣</span>
					</navigator>
				</van-col>
				<van-col span="6">
					<navigator url="../coupon/coupon" hover-class="none">
						<img src="~@/static/home/lq.png" alt="">
						<span>领券专区</span>
					</navigator>
				</van-col>
				<van-col span="6">
					<navigator url="../personalCenter/user/invitation" hover-class="none">
						<img src="~@/static/home/yq.png" alt="">
						<span>邀请好友</span>
					</navigator>
				</van-col>
			</van-row>

			<van-row class="radius huodong" gutter="15">
				<van-col span="12">
					<navigator url="../rushBy/rush" hover-class="none">
						<img src="~@/static/home/qd.png" class="hd1" alt="">
					</navigator>
				</van-col>
				<van-col span="12" >
					<van-row>
						<navigator url="../rushBy/highRush" hover-class="none">
							<img src="~@/static/home/pe.png" class="hd2" alt="">
						</navigator>
					</van-row>
					<van-row>
						<navigator url="../rushBy/consignment" hover-class="none">
							<img src="~@/static/home/jim.png" class="hd3" alt="">
						</navigator>
					</van-row>
				</van-col>
			</van-row>

			<div class="cardList">
					<card2/>
					<card2/>
					<card2/>
			</div>
			
			<div class="tabsBox">
				<div class="radius big">
					<h2>热销新品<img src="~@/static/home/xh.png">好物推荐</h2>
				</div>
				<van-tabs swipeable  @click="onClick" tab-active-class="active" custom-class="tabs">
					<van-tab title="综合"></van-tab>
					<van-tab title="销量"></van-tab>
					<van-tab title="最新"></van-tab>
					<van-tab title="价格"></van-tab>
				</van-tabs>

				<!-- 商品卡片 类型1 -->
				<div class="tabsCard">
					<card1/>
					<card1/>
					<card1/>
					<card1/>
					<card1/>
				</div>
			</div>


		</div>

	
	</view>
</template>

<script>
import card1 from '@/components/card1/card1.vue';
import card2 from '@/components/card2/card2.vue';
	export default {
		components: {card1,card2},
		data() {
			return {
				title: 'Hello',
				value:123
			}
		},
		onLoad() {

		},
		methods: {
			
			onNotice(){
				console.log('点击了')
			},
			onClick(e){
				console.log(e)
			},
			//跳转到搜索页
			toSearch(){
				uni.navigateTo({
						url: '../search/search'
				});
			},
			// 只允许通过相机扫码
			scanCode(){
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						console.log();
						console.log();
						uni.showToast({
							 title:res.result,
							 duration: 2000
						})
					}
				});
			}
			
		}
	}
</script>

<style lang="less">
.home{background: #f5f5f5;
	overflow-x: hidden
}
	.head{
		background: url('~@/static/home/head.png') no-repeat top;
		background-size: 100% auto;
		.state{
			width: 100%;
			display: inline-block;
			padding: 60upx 20upx 0;
			.sao{
				float: left;
				margin-top: 17upx;
				padding-right: 20upx;
				img{width: 36upx;height: 36upx;}
			}
			.search{
				float: left;
				width: 600upx;
				overflow: hidden;
				.van-search{
					border-radius: 35upx;
					height: 70upx;
					overflow: hidden;
					.van-search__content{background: #fff;}
				}
			}
			.lingdang{
				float: left;
				background: url('~@/static/home/xx.png') no-repeat top;
				background-size: 100% 100%;
				width: 36upx;
				height: 36upx;
				margin-top: 18upx;
				margin-left: 15upx;
			}
		}

		.recommend{
			width: 100%;
			margin-top: 30upx;
			padding-left: 20upx;
			font-size: 26upx;
			color: #2F1008;
			line-height: 40upx;
			>div{
				height: 40upx;
				border-radius: 40upx;
				padding: 0 20upx;
				background: #fff;
				float: left;
			}
			span{float: left;margin: 0 15upx;}
		}

		.add{
			display: inline-block;
			width: 100%;
			padding: 27upx 20upx 0;
			box-sizing:border-box;
			img{
				width: 100%;
				height: 240upx;
			}
		}

		.notice{
			margin: 30upx 20upx 0;
			background: url('~@/static/home/0.png') no-repeat left #fff !important;
			background-size: 100upx 70upx !important;
			height: 70upx;
			border-radius: 35upx;
			overflow: hidden;
			.van-notice-bar__wrap{margin-left:40upx;margin-right: 20upx;
				color: #505050;
				font-size: 26upx
			}
			
			.van-notice-bar__left-icon{
				margin-left: 8upx;
				
				.van-icon{
					font-size: 36upx !important;
					font-weight: bold;
					color: #2F1008
				}
			}
			.van-notice-bar__right-icon {
				top: 10upx;
				border-left: 1upx solid #DCDCDC;
				padding-left: 10upx;
				&:after{
					content: "全部";
					color: #4C83FF;
					font-size: 22upx;
				}
				.van-icon-arrow{display: none;}
			}
		}
	}

	.pd{
		width: 100%;
		display: inline-block;
		padding: 0 20upx;
		box-sizing: border-box;
		.radius{
			border-radius: 20upx;
			background: #fff;
		}
	}

	.kuaijie{
		width: 100%;
		float: left;
		margin-top: 30upx;
		margin-bottom: 30upx;
		.van-col{
			text-align: center;
			padding: 45upx 0;
			img{width: 95upx;height: 95upx;}
			span{
				display: block;
				font-size: 26upx;
				color: #000;
			}
		}
	}
	.huodong{
		
		img{width: 100%;}
		.hd1{height: 260upx;}
		.hd2{height: 120upx;}
		.hd3{height: 120upx;margin-top: 10upx;}
	}

	.tabsBox{
		position: relative;
		margin-top: 30upx;

		.big{
			height: 180upx;
			overflow: hidden;
			h2{line-height: 88upx; font-size: 28upx;color: #000;text-align: center;
				img{width: 40upx;height: 40upx;vertical-align: middle; margin: 0 5upx;}
			}
		}
		
		.tabs{
			margin-top: -95upx;
			.van-tabs__line{display: none;}
			.van-tabs__wrap {
				height: 60upx;
				&::after{border-bottom: none}
			}
			.active{
				color: #ED291E
			}
		}
		
	}
.tabsCard{
			display: flex;
			justify-content:space-between;
			flex-wrap: wrap;
			margin-top: 20upx;
		}
</style>
